<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        .iocn1{
            width: 150px;
            height: 150px;
            background-color: aqua;
            background-image: url(./1.png);
            display: block;
            background-position: -17px -10px;
        }
        .iocn2{
            width: 150px;
            height: 150px;
            background-image: url(./1.png);
            display: block;
            background-position: -1143px -160px;
        }
    </style>
</head>
<body>
    <!-- 
    CSS Sprite 也叫CSS精灵图，CSS雪碧图，是一种网页图片应用处理方式。
    它允许你将一个页面涉及到的所有零散图片都包含到一张大图中去。

    优点：减少图片的字节
          减少网页的http请求，从而大大的提高页面性能

    原理
    - 通过background-image引入背景图片
    - 再通过background-position把背景图片移到自己需要的位置
    -->
    <span class="iocn1"></span>
    <span class="iocn2"></span>
</body>
</html>